import 'package:flutter/material.dart';

class ProviderTest extends StatefulWidget {
  @override
  _ProviderTestState createState() => _ProviderTestState();
}

class _ProviderTestState extends State<ProviderTest>
    with SingleTickerProviderStateMixin {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
   
    return Scaffold(
      appBar: AppBar(title: Text('ProviderTest')),
      body: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ButtonBox()
        ],
      )),
    );
  }
}

class ButtonBox extends StatefulWidget {
  @override
  _ButtonBoxState createState() => _ButtonBoxState();
}

class _ButtonBoxState extends State<ButtonBox>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<double> animation;
  bool _next = true;
  @override
  void initState() {
    super.initState();
    _animationController =
        AnimationController(duration: Duration(milliseconds: 300), vsync: this);
    animation = Tween(begin: 50.0, end: 100.0).animate(_animationController);
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
        animation: animation,
        builder: (BuildContext context, Widget child) {
          return Ink(
              width: animation.value,
              height: 50,
              decoration: BoxDecoration(
                color: Colors.pink,
                borderRadius: BorderRadius.circular(40.0),
              ),
              child: InkWell(
                  borderRadius: BorderRadius.circular(40.0),
                  splashColor: Colors.pink[300],
                  child: Center(child: Text(_next ? 'Ready!' : '->')),
                  onTap: () {
                    if (_next) {
                      _animationController.forward();
                    } else {
                      _animationController.reverse();
                    }
                    _next = !_next;
                  }));
        });
  }
}
